<!DOCTYPE html>
<html>

<head>
  <title>Vector Web App</title>
  <!-- Meta Apple tags for a PWA like experience. -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="theme-color" content="#1e1e1e">
  <link rel="stylesheet" type="text/css" href="../css/style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/7508f396ac.js" crossorigin="anonymous"></script>
  <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, max-age=0">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="Thu, 01 Jan 1970 00:00:00 GMT">
</head>

<body>

  <div id="outer">
    <div id="content" class="">
      <h1 class="center">Vector Configuration</h1>
      <div id="botStats"></div>
      <hr>
      <div class="main-nav-parent">
        <div class="main-nav-child"><a href="/sdkapp"><i class="fa-solid fa-reply"></i><br />Back</a></div>
        <div class="main-nav-child"><a href="#" onclick="goToControlPage()"><i
              class="fa-solid fa-gamepad"></i><br />Control<br /></a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-volume'); return false;"><i
              class="fa-solid fa-volume-high" id="icon-volume" name="icon"></i><br />Volume</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-eyes'); return false;"><i
              class="fa-solid fa-eye" id="icon-eyes" name="icon"></i><br />Eye Color</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-face'); return false;"><i
              class="fa-solid fa-user" id="icon-face" name="icon"></i><br />Faces</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-actions'); return false;"><i
              class="fa-solid fa-person-running" id="icon-actions" name="icon"></i><br />Actions</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-stim'); return false;"><i
              class="fa-solid fa-face-laugh-beam" id="icon-stim" name="icon"></i><br />Stim</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-stats'); return false;"><i
              class="fa-solid fa-chart-simple" id="icon-stim" name="icon"></i><br />Statistics</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-photos'); getPhotos(); return false;"><i
              class="fa-solid fa-images" id="icon-photos" name="icon"></i><br />Photos</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-locale'); return false;"><i
              class="fa-solid fa-earth-americas" id="icon-locale" name="icon"></i><br />Locale</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-time'); return false;"><i
              class="fa-solid fa-clock" id="icon-time" name="icon"></i><br />Time</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-temp'); return false;"><i
              class="fa-solid fa-temperature-half" id="icon-temp" name="icon"></i><br />Units</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-button'); return false;"><i
              class="fa-solid fa-circle-dot" id="icon-button" name="icon"></i><br />Button</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-alexa'); return false;"><i
              class="fa-solid fa-house-signal" id="icon-alexa" name="icon"></i><br />Alexa</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-location'); return false;"><i
              class="fa-solid fa-location-crosshairs" id="icon-location" name="icon"></i><br />Location</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-timezone'); return false;"><i
              class="fa-solid fa-hourglass" id="icon-timezone" name="icon"></i><br />Time Zone</a></div>
      </div>
      <hr>

      <div id="section-volume" class="toggleable-section" style="display:none;">
        <h2 class="center">Volume</h2>
        <hr class="small-hr">
        <div id="currentVolume" class="center"></div>
        <div style="text-align: left;" class="center">
          <label>
            <input type="radio" name="vol" id="Mute" value="Mute" onclick="sendForm('/api-sdk/volume?volume=0')">Mute
          </label>
          <label>
            <input type="radio" name="vol" id="Low" value="Low" onclick="sendForm('/api-sdk/volume?volume=1')">Low
          </label>
          <label>
            <input type="radio" name="vol" id="Medium Low" value="Medium Low"
              onclick="sendForm('/api-sdk/volume?volume=2')">Medium Low
          </label>
          <label>
            <input type="radio" name="vol" id="Medium" value="Medium"
              onclick="sendForm('/api-sdk/volume?volume=3')">Medium
          </label>
          <label>
            <input type="radio" name="vol" id="Medium High" value="Medium High"
              onclick="sendForm('/api-sdk/volume?volume=4')">Medium High
          </label>
          <label>
            <input type="radio" name="vol" id="High" value="High" onclick="sendForm('/api-sdk/volume?volume=5')">High
          </label>
        </div>
        <br>
        <hr>
      </div>

      <div id="section-eyes" class="toggleable-section" style="display:none;">
        <h2 style="margin-bottom: 0px;">Eye Color</h2>
        <hr class="small-hr">
        <h4 style="margin-bottom: 0px; margin-top:0px;">Preset Eye Colors:</h4>
        <div style="text-align: left;" class="center">
          <label>
            <input type="radio" name="eye" id="Teal" value="Teal"
              onclick="sendForm('/api-sdk/eye_color?color=0')">Teal<br>
          </label>
          <label>
            <input type="radio" name="eye" id="Orange" value="Orange"
              onclick="sendForm('/api-sdk/eye_color?color=1')">Orange<br>
          </label>
          <label>
            <input type="radio" name="eye" id="Yellow" value="Yellow"
              onclick="sendForm('/api-sdk/eye_color?color=2')">Yellow<br>
          </label>
          <label>
            <input type="radio" name="eye" id="Lime Green" value="Lime Green"
              onclick="sendForm('/api-sdk/eye_color?color=3')">Lime Green<br>
          </label>
          <label>
            <input type="radio" name="eye" id="Azure Blue" value="Azure Blue"
              onclick="sendForm('/api-sdk/eye_color?color=4')">Azure Blue<br>
          </label>
          <label>
            <input type="radio" name="eye" id="Purple" value="Purple"
              onclick="sendForm('/api-sdk/eye_color?color=5')">Purple<br>
          </label>
          <label>
            <input type="radio" name="eye" id="Other Green" value="Other Green"
              onclick="sendForm('/api-sdk/eye_color?color=6')">Other Green<br>
          </label>
        </div>
        <br />
        <hr class="small-hr">
        <h4 style="margin-top: 0px;" class="center">Custom Eye Color:</h4>
        <div class="center" id="picker"></div><br />
        <div class="center">
          <button class="settings" onclick="sendCustomColor()">Submit</button>
        </div>
        <hr>
      </div>

      <div id="section-face" class="toggleable-section" style="display:none;">
        <h2 class="center">Face Manager</h2>
        <hr class="small-hr">
        <h3 class="center">Modify existing faces:</h3>
        <p class="center">Choose the face you would like to modify.</p>
        <div class="center">
          <select id="faceList" name="faceList"></select>
        </div>
        <div class="center">
          <button class="center" onclick="refreshFaceList()">Refresh list</button>
        </div>
        <div class="center">
          <div id="faceButtons">
            <button onclick="deleteFace()">Delete</button>
            <button onclick="renameFace()">Rename</button>
          </div>
        </div>
        <hr class="small-hr">
        <h3 class="center">Add a new face:</h3>
        <p class="center">Enter a name you'd like to add:</p>
        <div class="center">
          <input class="tinput" id="faceInput" name="faceInput" type="text" placeholder="Put name here">
        </div>
        <div class="center">
          <button onclick="addFace()">Add Face</button>
        </div>
        <hr>
      </div>

      <div id="section-actions" class="toggleable-section" style="display:none;">
        <h2 class="center">Quick Actions</h2>
        <hr class="small-hr">
        <div class="center">
          <button onclick="sendForm('/api-sdk/cloud_intent?intent=explore_start')">Explore
            Start</button>
          <button onclick="sendForm('/api-sdk/cloud_intent?intent=intent_imperative_dance')">Listen for
            Beat</button>
          <button onclick="sendForm('/api-sdk/cloud_intent?intent=intent_system_sleep')">Go to
            Sleep</button>
          <button onclick="sendForm('/api-sdk/cloud_intent?intent=intent_imperative_fetchcube')">Fetch
            Cube</button>
          <button onclick="sendForm('/api-sdk/cloud_intent?intent=intent_system_charger')">Go
            Home</button>
        </div>
        <hr>
      </div>

      <div id="section-stim" class="toggleable-section" style="display:none;">
        <h2 class="center">Stimulation</h2>
        <hr class="small-hr">
        <div class="center">
          <canvas id="stimChart"></canvas>
        </div>
        <hr>
      </div>

      <div id="section-stats" class="toggleable-section" style="display:none;">
        <h2 class="center">Statistics</h2>
        <hr class="small-hr">
        <button onclick="updateStats()">Refresh</button><br>
        <div id="statsSection"></div>
        <hr>
      </div>

      <div id="section-photos" class="toggleable-section" style="display:none;">
        <h2 class="center">Photos</h2>
        <hr class="small-hr">
        <div class="center">
          <button onclick="getPhotos()">Refresh List</button>
        </div>
        <div class="center">
          <div id="photoSection"></div>
        </div>
        <hr>
      </div>

      <div id="section-locale" class="toggleable-section" style="display:none;">
        <h2 class="center">Locale</h2>
        <hr class="small-hr">
        <div id="currentLocale" class="center"></div>
        <div style="text-align: left;" class="center">
          <label>
            <input type="radio" name="locale" id="en-US" value="English (US)"
              onclick="sendForm('/api-sdk/locale?locale=en-US')">English (US)<br>
          </label>
          <label>
            <input type="radio" name="locale" id="en-GB" value="English (GB)"
              onclick="sendForm('/api-sdk/locale?locale=en-GB')">English (GB)<br>
          </label>
          <label>
            <input type="radio" name="locale" id="en-AU" value="English (AU)"
              onclick="sendForm('/api-sdk/locale?locale=en-AU')">English (AU)<br>
          </label>
          <label>
            <input type="radio" name="locale" id="de-DE" value="German"
              onclick="sendForm('/api-sdk/locale?locale=de-DE')">German<br>
          </label>
          <label>
            <input type="radio" name="locale" id="fr-FR" value="French"
              onclick="sendForm('/api-sdk/locale?locale=fr-FR')">French<br>
          </label>
          <label>
            <input type="radio" name="locale" id="ja-FP" value="Japanese"
              onclick="sendForm('/api-sdk/locale?locale=ja-JP')">Japanese<br>
          </label>
        </div>
        <br>
        <hr>
      </div>

      <div id="section-time" class="toggleable-section" style="display:none;">
        <h2 class="center">Time Format</h2>
        <hr class="small-hr">
        <div id="currentTimeSet" class="center"></div>
        <div style="text-align: left;" class="center">
          <label>
            <input type="radio" name="time" id="12 Hour" value="12 Hour"
              onclick="sendForm('/api-sdk/time_format_12')">12 Hour<br>
          </label>
          <label>
            <input type="radio" name="time" id="24 Hour" value="24 Hour"
              onclick="sendForm('/api-sdk/time_format_24')">24 Hour<br>
          </label>
        </div>
        <br>
        <hr>
      </div>

      <div id="section-temp" class="toggleable-section" style="display:none;">
        <h2 class="center">Temp Format</h2>
        <hr class="small-hr">
        <div id="currentTempFormat" class="center"></div>
        <div style="text-align: left;" class="center">
          <label>
            <input type="radio" name="temp" id="Celsius" value="Celsius"
              onclick="sendForm('/api-sdk/temp_c')">Celsius<br>
          </label>
          <label>
            <input type="radio" name="temp" id="Fahrenheit" value="Fahrenheit"
              onclick="sendForm('/api-sdk/temp_f')">Fahrenheit<br>
          </label>
        </div>
        <br>
        <hr>
      </div>

      <div id="section-button" class="toggleable-section" style="display:none;">
        <h2 class="center">Button Action</h2>
        <hr class="small-hr">
        <div id="currentButton" class="center"></div>
        <div style="text-align: left;" class="center">
          <label>
            <input type="radio" name="but" id="Hey Vector" value="Hey Vector"
              onclick="sendForm('/api-sdk/button_hey_vector')">Hey Vector<br>
          </label>
          <label>
            <input type="radio" name="but" id="Alexa" value="Alexa"
              onclick="sendForm('/api-sdk/button_alexa')">Alexa<br>
          </label>
        </div>
        <br>
        <hr>
      </div>

      <div id="section-alexa" class="toggleable-section" style="display:none;">
        <h2 class="center">Alexa</h2>
        <hr class="small-hr">
        <div id="alexaStatus" class="center"></div>
        <a class="center" target="_blank" rel="noopener noreferrer"
          href="https://amazon.com/code">https://amazon.com/code</a>
        <hr class="small-hr">
        <div class="center">
          <button onclick="sendForm('/api-sdk/alexa_sign_in')">Signin Alexa</button>
          <button onclick="sendForm('/api-sdk/alexa_sign_out')">Signout Alexa</button>
        </div>
        <hr>
      </div>

      <div id="section-location" class="toggleable-section" style="display:none;">
        <h2 class="center">Set Location</h2>
        <hr class="small-hr">
        <div id="currentLocation"></div>
        <small class="desc">Example: San Francisco, California</small>
        <div class="center">
          <input class="tinput" id="locationInput" name="locationInput" type="text" placeholder="Put location here">
        </div>
        <hr class="small-hr">
        <button onclick="sendLocation()">Submit Location</button>
        <hr>
      </div>

      <div id="section-timezone" class="toggleable-section" style="display:none;">
        <h2 style="margin-bottom:0px;">Set Time Zone</h2>
        <hr class="small-hr">
        <div id="currentTimeZone" class="center"></div>
        <div class="center">
          <!--<input class="tinput" id="tzInput" name="tzInput" type="text" placeholder="Put time zone here">-->
          <select id="tzInput" value="" class="vec-field">
            <option value="Pacific/Honolulu">Pacific/Honolulu</option>
            <option value="America/Juneau">America/Juneau</option>
            <option value="America/Los_Angeles">America/Los_Angeles</option>
            <option value="America/Phoenix">America/Phoenix</option>
            <option value="America/Denver">America/Denver</option>
            <option value="America/Lima">America/Lima</option>
            <option value="America/Chicago">America/Chicago</option>
            <option value="America/Bogota">America/Bogota</option>
            <option value="America/New_York">America/New_York</option>
            <option value="America/Argentina/Buenos_Aires">America/Argentina/Buenos_Aires</option>
            <option value="America/Santiago">America/Santiago</option>
            <option value="America/Sao_Paulo">America/Sao_Paulo</option>
            <option value="America/Halifax">America/Halifax</option>
            <option value="America/St_Johns">America/St_Johns</option>
            <option value="GMT">GMT</option>
            <option value="Europe/Lisbon">Europe/Lisbon</option>
            <option value="Europe/London">Europe/London</option>
            <option value="Europe/Paris">Europe/Paris</option>
            <option value="Europe/Athens">Europe/Athens</option>
            <option value="Europe/Istanbul">Europe/Istanbul</option>
            <option value="Europe/Moscow">Europe/Moscow</option>
            <option value="Africa/Lagos">Africa/Lagos</option>
            <option value="Africa/Harare">Africa/Harare</option>
            <option value="Africa/Addis_Ababa">Africa/Addis_Ababa</option>
            <option value="Asia/Dubai">Asia/Dubai</option>
            <option value="Asia/Tehran">Asia/Tehran</option>
            <option value="Asia/Karachi">Asia/Karachi</option>
            <option value="Asia/Kolkata">Asia/Kolkata</option>
            <option value="Asia/Dhaka">Asia/Dhaka</option>
            <option value="Asia/Bangkok">Asia/Bangkok</option>
            <option value="Asia/Jakarta">Asia/Jakarta</option>
            <option value="Asia/Hong_Kong">Asia/Hong_Kong</option>
            <option value="Asia/Singapore">Asia/Singapore</option>
            <option value="Asia/Manila">Asia/Manila</option>
            <option value="Asia/Seoul">Asia/Seoul</option>
            <option value="Asia/Tokyo">Asia/Tokyo</option>
            <option value="Australia/Perth">Australia/Perth</option>
            <option value="Australia/Darwin">Australia/Darwin</option>
            <option value="Australia/Adelaide">Australia/Adelaide</option>
            <option value="Australia/Brisbane">Australia/Brisbane</option>
            <option value="Australia/Sydney">Australia/Sydney</option>
            <option value="Australia/Auckland">Australia/Auckland</option>
          </select>
        </div>
        <br />
        <hr class="small-hr">
        <button onclick="sendTimeZone()">Submit Time Zone</button>
        <hr>
      </div>

    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="./js/settings.js"></script>
  <script src="./js/httprequest.js"></script>
  <script src="./js/iro.min.js"></script>
  <script src="./js/common.js"></script>
  <script src="../js/battery.js"></script>
  <script src="./js/main.js"></script>
  <script src="./js/faces.js"></script>
  <script src="../js/ui.js"></script>
  <iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>

</body>

</html>
